<template>
  <div class="cust-analysis-overview">
    <div
      v-for="index of 4"
      :key="index"
      class="statis-item"
      :class="{'statis-item-cover':hover}"
      @click="showSinChart(index)"
      @mouseenter="enter(index)"
      @mouseleave="leave()"
    >
      <h4 class="statis-item__title">
        {{ overviewData.title[index-1] }}
      </h4>
      <p class="statis-item__data">
        {{ overviewData.num[index-1] }}
      </p>
      <span
        v-if="overviewData.rate[index-1] !==0"
        class="change-trend change-trend--decline"
        :class="[overviewData.rate[index-1]*100 > 0 ? 'pointerUpT' : 'pointerBuT' ]"
      >
        <span
          v-if="overviewData.type===1"
          class="change-trend__title"
        />
        <span
          v-if="overviewData.type===2"
          class="change-trend__title"
        >{{ $t('dataAnalysis.compareWithThePrevious7Days') }}</span>
        <span
          v-if="overviewData.type===3"
          class="change-trend__title"
        >{{ $t('dataAnalysis.compareWithThePrevious30Days') }}</span>
        <span
          v-if="overviewData.type===4"
          class="change-trend__title"
        >{{ $t('dataAnalysis.compareWithThePreviousOneDay') }}</span>
        <span
          v-if="overviewData.type===5"
          class="change-trend__title"
        >{{ $t('dataAnalysis.compareWithThePreviousAMonth') }}</span>

        <span
          v-if="overviewData.type===0 && overviewData.rate[index-1]===0"
          class="change-trend__title change-trend__title-gray"
        >{{ $t('home.Percentage') }}-%</span>
        <span
          v-if="overviewData.type!==1"
          class="change-trend__data"
        >
          <span v-if="overviewData.type!==0" />
          <img
            v-if="overviewData.rate[index-1] < 0 && overviewData.type !== 0"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 4px"
            alt=""
            width="8"
            height="10"
          >
          <img
            v-if="overviewData.rate[index-1] >= 0 && overviewData.type !== 0"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 4px"
            alt=""
            width="8"
            height="10"
          >

          <span :class="[overviewData.rate[index-1]*100 > 0 ? 'pointerUpT' : 'pointerBuT' ]">{{ filtersRatio((overviewData.rate[index-1]*100).toFixed(2)) }}</span>
        </span>

      </span>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['index'])

const props = defineProps({
  hover: {
    type: Boolean,
    default: null
  },
  overviewData: {
    type: Object,
    default: null
  }
})
const filtersRatio = (value) => {
  if (value < 0) {
    return value * -1 + '%'
  }
  return value + '%'
}
const curIndex = ref(0)
const enter = (index) => {
  curIndex.value = index
}
const leave = () => {
  curIndex.value = 0
}
/**
   * 单个类型的表
   */
const showSinChart = (index) => {
  if (props.hover) {
    // 表示需要展示的是哪个表
    emit('index', index)
  }
}

</script>

<style lang="scss" scoped>
  /* 数量统计 */
  .cust-analysis-overview {
    display: flex;

    .statis-item {
      display: inline-block;
      background: #f7f8fa;
      padding: 16px 0 16px 0;
      position: relative;
      box-sizing: border-box;
      -ms-flex: 1;
      flex: 1;
      text-align: center;
      &.statis-item-cover:hover{
        background:rgb(245,245,245);
      }
    }

    .statis-item__title {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
      display: inline-block;
      margin-bottom: 8px;
    }

    .statis-item__data {
      font-size: 20px;
      font-weight: bold;
      line-height: 26px;
      color: #333333;
      margin-bottom: 8px;
    }

    .change-trend--decline {
      color: #3CC480;
    }

    .change-trend__title-gray {
      color: #969799;
    }

    .change-trend {
      font-size: 12px;
      line-height: 18px;
    }

    .change-trend__data {
      position: relative;
      padding-left: 10px;
    }

    /* 上升下降箭头 */
    .pointerUpT {
      color: #3CC480;
    }

    .pointerBuT {
      color: #FF4141;
    }

  }

</style>
